import Action from '@/components/Action';
import tool from '@/utils/tool';
import { Modal } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import { Component } from 'react';
import styles from './index.less';

export default class ModalComponent extends Component {
  show = () => {
    this.visible = true;
    this.setState({});
  };

  hide() {
    this.visible = false;
    this.setState({});
  }

  handleCancel = (e) => {
    const { onCancel } = this.props;
    if (onCancel) {
      let res = onCancel(e);
      if (res === false) {
        return;
      }
    }
    this.hide();
  };
  autoClose = (res) => {
    //提交成功后自动关闭
    if (res === false) {
      return;
    }

    if (tool.isPromise(res)) {
      this.loading = res;
      res
        .then((val) => {
          if (val !== false) {
            this.hide();
          }
        })
        .finally(() => {
          this.loading = false;
          this.setState({});
        });
      this.setState({});
      return;
    }
    this.hide();
  };
  handleOk = () => {
    const { onOk } = this.props;
    if (!onOk) {
      return;
    }
    this.autoClose(onOk());
  };
  handleReject = () => {
    const { onReject } = this.props;
    if (!onReject) {
      return;
    }
    this.autoClose(onReject());
  };
  handleAccept = () => {
    const { onAccept } = this.props;
    if (!onAccept) {
      return;
    }
    this.autoClose(onAccept());
  };

  render() {
    const {
      className,
      children,
      onOk,
      okText = 'OK',
      cancelText = 'Cancel',
      onAccept,
      acceptText = 'Accept',
      acceptButtonProps,
      onReject,
      rejectText = 'Reject',
      rejectButtonProps,
      onCancel,
      visible,
      isAudit,
      width = 600,
      footer,
      cancelButtonProps,
      okButtonProps,
      contentFill,
      ...props
    } = this.props;

    //可受控
    let _visible = this.visible;
    if (this.props.hasOwnProperty('visible')) {
      _visible = this.props.visible;
    }
    let _footer;
    if (footer) {
      _footer = footer;
    } else if (isAudit) {
      _footer = (
        <>
          <Action
            onClick={this.handleReject}
            className="m-l-xs"
            type="error"
            {...rejectButtonProps}
            loading={this.loading}
          >
            {rejectText}
          </Action>
          <Action
            onClick={this.handleAccept}
            className="m-l-xs"
            type="primary"
            {...acceptButtonProps}
            loading={this.loading}
          >
            {acceptText}
          </Action>
        </>
      );
    } else {
      _footer = (
        <>
          <Action onClick={this.handleCancel} {...cancelButtonProps}>
            {cancelText}
          </Action>
          <Action
            onClick={this.handleOk}
            type="primary"
            className="m-l-xs"
            {...okButtonProps}
            loading={this.loading}
          >
            {okText}
          </Action>
        </>
      );
    }
    if (footer === false) {
      _footer = false;
    }

    return (
      <Modal
        onCancel={this.handleCancel}
        className={classNames(className, {
          [styles.contentFill]: contentFill,
        })}
        width={width}
        footer={_footer}
        visible={_visible}
        {...props}
      >
        <If condition={_visible}>
          {_.isFunction(children)
            ? children({ loading: this.loading })
            : children}
        </If>
      </Modal>
    );
  }
}
